﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import '../../common/common.css'
import '../../common/tree.css'
import './Picker.css'
import Checkable from '../../common/Checkable'
import Expandcheckable from '../../common/Expandcheckable'
import closeIcon from '../../imgs/close.png';
import { EnvContext } from '../../common/EnvContext'

class Teachers extends Component {
    static propTypes = {
        teachers: PropTypes.array,
        check: PropTypes.func.isRequired
    }
    render() {
        return <div className='teachers-box'>
            {this.props.teachers && this.props.teachers.length > 0 &&
                this.props.teachers.map(t =>
                    <div className='teacher' key={t.eno}>
                        <Checkable
                            text={t.name}
                            checked={t.checked}
                            onCheck={() => this.props.check(t)}
                        />
                    </div>
                )
            }
        </div>
    }
}
class Section extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        teachers: PropTypes.array,

        checked: PropTypes.bool,
        check: PropTypes.func.isRequired,

        expanded: PropTypes.bool,
        expand: PropTypes.func.isRequired,
    }
    render() {
        return <div>
            <Expandcheckable
                text={this.props.name}
                expanded={this.props.expanded}
                onExpand={() => this.props.expand()}
                checked={this.props.checked}
                onCheck={() => this.props.check()}
            />
            {this.props.expanded &&
                <div className='indent-children'>
                    <Teachers
                        teachers={this.props.teachers}
                        check={t => this.props.check(t)}
                    />
                </div>
            }
        </div>
    }
}
class Department extends Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        teachers: PropTypes.array,
        sections: PropTypes.array,

        checked: PropTypes.bool,
        check: PropTypes.func.isRequired,

        expanded: PropTypes.bool,
        expand: PropTypes.func.isRequired
    }
    render() {
        return (
            <div>
                <Expandcheckable
                    text={this.props.name}
                    expanded={this.props.expanded}
                    onExpand={() => this.props.expand()}
                    checked={this.props.checked}
                    onCheck={() => this.props.check()}
                />
                {this.props.expanded === true &&
                    <div className='indent-children'>
                        <Teachers
                            teachers={this.props.teachers}
                            check={t => this.props.check(null, t)}
                        />
                        {this.props.sections && this.props.sections.map(sec =>
                            <Section
                                key={sec.dno}
                                name={sec.name}
                                teachers={sec.teachers}

                                checked={sec.checked}
                                check={t => this.props.check(sec, t)}

                                expanded={sec.expanded}
                                expand={() => this.props.expand(sec)}
                            />)
                        }
                    </div>
                }
            </div>)
    }
}
class College extends Component {
    static propTypes = {
        teachers: PropTypes.array,
        departments: PropTypes.array.isRequired,

        checked: PropTypes.bool,
        check: PropTypes.func.isRequired,

        expanded: PropTypes.bool,
        expand: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='college-root'>
                <EnvContext.Consumer>
                    {({ collegeName }) => <Expandcheckable
                        text={collegeName}
                        expanded={this.props.expanded}
                        onExpand={() => this.props.expand()}
                        checked={this.props.checked}
                        onCheck={() => this.props.check()}
                    />}
                </EnvContext.Consumer>
                <div className='college-children'>
                    {this.props.expanded &&
                        <div className='indent-children'>
                            {this.props.teachers && this.props.teachers.length > 0 &&
                                <Teachers
                                    teachers={this.props.teachers}
                                    check={t => this.props.check(null, null, t)}
                                />
                            }
                            {
                                this.props.departments.map(d =>
                                    <Department
                                        key={d.dno}
                                        name={d.name}
                                        teachers={d.teachers}
                                        sections={d.sections}

                                        checked={d.checked}
                                        check={(s, t) => this.props.check(d, s, t)}

                                        expanded={d.expanded}
                                        expand={s => this.props.expand(d, s)}
                                    />)
                            }
                        </div>
                    }
                </div>
            </div>
        )
    }
}
export default class Picker extends Component {
    static propTypes = {
        college: PropTypes.object.isRequired,
        check: PropTypes.func.isRequired,
        expand: PropTypes.func.isRequired,
        togglePicker: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='picker-mask' ref={el => this.mask = el}>
                <div className='picker' ref={el => this.picker = el}>
                    <div className='picker-header' ref={el => this.header = el}>
                        <span>选择收信人</span>
                        <div className='picker-close' onClick={this.props.togglePicker}>
                            <img alt='' src={closeIcon}></img>
                        </div>
                    </div>
                    <div className='picker-body'>
                        <College
                            name={this.props.college.name}
                            teachers={this.props.college.teachers}
                            departments={this.props.college.departments}

                            checked={this.props.college.checked}
                            check={this.props.check}

                            expanded={this.props.college.expanded}
                            expand={this.props.expand} />
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount() {
        var mask = this.mask,
            picker = this.picker,
            header = this.header;
        if (mask) {
            picker.style.left = (mask.offsetWidth - picker.offsetWidth) / 2 + 'px';
            picker.style.top = (mask.offsetHeight - picker.offsetHeight) / 2 + 'px';

            header.addEventListener('mousedown', this.handleMouseDown);
        }
    }
    commentWillUnmount() {
        this.header && this.header.removeEventListener('mousedown', this.handleMouseDown);
    }
    handleMouseDown = e => {
        var picker = this.picker,
            header = this.header,
            baseX = picker.offsetLeft - e.screenX,
            baseY = picker.offsetTop - e.screenY;
        const mouseMove = me => {
            picker.style.left = (baseX + me.screenX) + 'px';
            picker.style.top = (baseY + me.screenY) + 'px';
        }
        const mouseUp = ue => {
            window.removeEventListener('mousemove', mouseMove, true);
            header.removeEventListener('mouseup', mouseUp, true);
        }
        header.addEventListener('mouseup', mouseUp, true);
        window.addEventListener('mousemove', mouseMove, true);
    }
}
